<template>
  <div class="consultation">
    <div class="consultation-header">
      <h1>咨询服务</h1>
      <p class="subtitle">我们的专业咨询师团队为您提供个性化学习指导</p>
    </div>

    <!-- 擅长领域筛选 -->
    <div class="expertise-filter">
      <div class="filter-options">
        <button
          class="filter-btn"
          :class="{ active: selectedExpertise === 'all' }"
          @click="selectExpertise('all')"
        >
          全部
        </button>
        <button
          v-for="item in expertiseList"
          :key="item.value"
          class="filter-btn"
          :class="{ active: selectedExpertise === item.value }"
          @click="selectExpertise(item.value)"
        >
          {{ item.label }}
        </button>
      </div>
    </div>

    <div class="consultants-container">
      <!-- 骨架屏 -->
      <div v-if="loading" class="consultants-grid">
        <div v-for="i in 4" :key="i" class="consultant-card skeleton">
          <div class="consultant-avatar skeleton-img"></div>
          <div class="consultant-info">
            <div class="skeleton-title"></div>
            <div class="skeleton-subtitle"></div>

            <div class="basic-info">
              <div class="info-item" v-for="j in 4" :key="j">
                <div class="skeleton-label"></div>
                <div class="skeleton-value"></div>
              </div>
            </div>

            <div class="expertise-list">
              <div class="skeleton-label"></div>
              <div class="expertise-tags">
                <div v-for="k in 3" :key="k" class="skeleton-tag"></div>
              </div>
            </div>

            <div class="skeleton-button"></div>
          </div>
        </div>
      </div>

      <div v-else-if="error" class="error-message">{{ error }}</div>
      <div v-else-if="consultants.length === 0" class="empty-state">
        <el-empty description="暂无相关咨询师" :image-size="200">
          <template #description>
            <p>当前暂无相关咨询师，请尝试选择其他领域</p>
          </template>
          <el-button type="primary" @click="selectExpertise('all')"
            >查看全部咨询师</el-button
          >
        </el-empty>
      </div>
      <div v-else class="consultants-grid">
        <div
          v-for="consultant in consultants"
          :key="consultant.id"
          class="consultant-card"
        >
          <div class="consultant-avatar">
            <img
              :src="consultant.avatar || '/default-avatar.png'"
              :alt="consultant.nickname"
            />
          </div>
          <div class="consultant-info">
            <h3 class="consultant-name">{{ consultant.nickname }}</h3>
            <p class="consultant-title">{{ consultant.roleNames }}</p>

            <div class="basic-info">
              <div class="info-item">
                <span class="info-label">毕业学校：</span>
                <span class="info-value">{{ consultant.schoolName }}</span>
              </div>

              <div class="info-item">
                <span class="info-label">最高学历：</span>
                <span class="info-value">{{
                  consultant.academicDegreeName
                }}</span>
              </div>

              <div class="info-item" v-if="consultant.email">
                <span class="info-label">邮箱：</span>
                <span class="info-value">{{ consultant.email }}</span>
              </div>

              <div class="info-item" v-if="consultant.mobile">
                <span class="info-label">电话：</span>
                <span class="info-value">{{
                  maskPhoneNumber(consultant.mobile)
                }}</span>
              </div>
            </div>

            <div
              class="expertise-list"
              v-if="consultant.expertiseList && consultant.expertiseList.length"
            >
              <span class="expertise-label">专长领域：</span>
              <div class="expertise-tags">
                <span
                  v-for="expertise in consultant.expertiseList"
                  :key="expertise.expertiseId"
                  class="expertise-tag"
                >
                  {{ expertise.expertiseName }}
                </span>
              </div>
            </div>

            <button
              class="contact-btn"
              @click="contactConsultant(consultant.id)"
            >
              联系咨询师
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { requestUserList, type UserPageVO } from "@/api/user";
import { getDictList } from "@/api/dict";
import { ElEmpty, ElButton, ElMessage } from "element-plus";
import { useUserStore } from "@/store";
import router from "@/router";
import { addCounselLog, type CounselLog } from "@/api/counselLog";

const loading = ref(true);
const error = ref("");
const consultants = ref<UserPageVO[]>([]);
const expertiseList = ref<{ label: string; value: string }[]>([]);
const selectedExpertise = ref("all");

// 手机号脱敏处理函数
const maskPhoneNumber = (phone: string): string => {
  if (!phone) return "";
  return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
};

// 选择擅长领域
const selectExpertise = (expertise: string) => {
  selectedExpertise.value = expertise;
  fetchConsultants(expertise);
};

const fetchConsultants = async (expertise: string) => {
  try {
    loading.value = true;
    error.value = "";
    const response = await requestUserList(expertise);
    consultants.value = Array.isArray(response) ? response : [response];
  } catch (err) {
    console.error("获取咨询师信息失败:", err);
    error.value = "获取咨询师信息失败，请稍后再试";
  } finally {
    loading.value = false;
  }
};

const userStore = useUserStore();
const contactConsultant = (consultantId: number) => {
  if (!userStore.userInfo?.userId) {
    ElMessage.warning("请先登录");
    router.push("/login");
    return;
  }
  if (userStore.userInfo?.userId == consultantId) {
    ElMessage.error("不能联系自己");
    return;
  }
  const params: CounselLog = {
    consultantId,
  };
  addCounselLog(params).then((res) => {
    console.info("日志记录成功",res);
  }).catch(error=>{
    console.error("日志记录失败",error);
  });
  router.push({
    path: "/chat-message",
    query: {
      consultantId,
    },
  });
  console.log(consultantId, "consultantId");
};

onMounted(() => {
  // 获取擅长领域列表
  getDictList("expertise_field").then((res) => {
    if (res && Array.isArray(res)) {
      expertiseList.value = res.map((item) => ({
        label: item.label,
        value: item.value,
      }));
    }
    // 获取所有咨询师
    fetchConsultants("all");
  });
});
</script>

<style scoped>
.consultation {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.consultation-header {
  text-align: center;
  margin-bottom: 40px;
}

.consultation-header h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

/* 擅长领域筛选样式 */
.expertise-filter {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.filter-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  padding: 8px 16px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background-color: #f0f7ff;
  border-color: #007bff;
  color: #007bff;
}

.filter-btn.active {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}

.loading,
.error-message {
  text-align: center;
  padding: 40px;
  font-size: 18px;
}

.error-message {
  color: #dc3545;
}

.consultants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.consultant-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.consultant-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.consultant-avatar {
  width: 180px;
  height: 240px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.consultant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f5f5f5;
}

.consultant-info {
  padding: 24px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.consultant-name {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px;
  position: relative;
  padding-bottom: 8px;
}

.consultant-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #007bff;
}

.consultant-title {
  font-size: 15px;
  color: #007bff;
  margin: 0 0 16px;
  font-weight: 500;
}

.basic-info {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  border-left: 4px solid #007bff;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  font-weight: 500;
  text-align: right;
  min-width: 80px;
  margin-right: 12px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  text-align: left;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expertise-list {
  margin: 16px 0;
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.expertise-label {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
}

.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expertise-tag {
  background-color: #e6f2ff;
  color: #007bff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  transition: background-color 0.3s ease;
}

.expertise-tag:hover {
  background-color: #cce5ff;
}

.contact-btn {
  width: auto;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  margin-top: auto;
  align-self: flex-start;
}

.contact-btn:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* 骨架屏样式 */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

.skeleton-img {
  background-color: #e0e0e0;
}

.skeleton-title {
  height: 24px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 70%;
}

.skeleton-subtitle {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 16px;
  width: 40%;
}

.skeleton-label {
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 4px;
  width: 60px;
}

.skeleton-value {
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 4px;
  flex: 1;
}

.skeleton-tag {
  height: 24px;
  background-color: #e0e0e0;
  border-radius: 12px;
  width: 80px;
}

.skeleton-button {
  height: 36px;
  background-color: #e0e0e0;
  border-radius: 6px;
  width: 120px;
  margin-top: auto;
}

@media (max-width: 992px) {
  .consultants-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .consultant-card {
    flex-direction: column;
  }

  .consultant-avatar {
    width: 100%;
    height: 240px;
    margin: 0 auto;
  }

  .consultant-info {
    padding: 20px;
  }

  .contact-btn {
    width: 100%;
  }
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.empty-state :deep(.el-empty__description p) {
  color: #909399;
  margin: 10px 0;
}
</style>
